<!--
 * @Description: 
 * @version: 
 * @Author: 171
 * @Date: 2022-09-11 12:15:47
 * @LastEditors: 171
 * @LastEditTime: 2022-09-12 12:47:36
-->
<script setup lang='ts'>

  import { reactive, ref, onMounted, onBeforeUnmount } from 'vue'
  import useDrag from "../hooks/drag"
  
  const tab = ref(true) // 切换内容和主题
  const tabShow = ref(true) // 针对tab本身的隐藏觉额显示
  
  const hasClass = (element: HTMLElement, className: string) => {
    return `${element.className}`.indexOf(`${className}`) > -1;
  }

  const changeTab = () => {
    tab.value = !tab.value;
    const cards = document.querySelector('.cards') as HTMLElement;
    if (hasClass(cards, 'z-active')) {
      cards.className = cards.className.replace(' z-active', '')
    } else {
      cards.className += ' z-active'
    }
  }

  let beforeX: number, beforeY: number, afterX: number, afterY: number;
  let dragFn: any,
    getMousedownClient: any,
    getMouseupClient: any,
    judgeClick: any;
  
  onMounted(() => {
    const drag = document.getElementById('drag') as HTMLElement;
    const border = document.getElementById('border') as HTMLElement;
    dragFn = useDrag(drag); // 获得绑定拖拽的事件函数
    getMousedownClient = (e: any) => {
      [ beforeX, beforeY ] = [ e.clientX, e.clientY ];
    }
    getMouseupClient = (e: any) => {     
      [ afterX, afterY ] = [ e.clientX, e.clientY ];
      if(afterX <= 25) {   
        tabShow.value = false;
        border.style.top = afterY  - 28 + 'px';
      }; // 当贴边时隐藏
    }
    judgeClick = (e: any) => {     
      if (beforeX === afterX && beforeY === afterY) {
        changeTab();
      }
    }
    drag.addEventListener('mousedown', getMousedownClient);
    drag.addEventListener('mouseup', getMouseupClient);
    drag.addEventListener("click", judgeClick);
  });

  onBeforeUnmount(() => {
    const drag = document.getElementById('drag') as HTMLElement;
    drag.removeEventListener('mousedown', dragFn);
    drag.removeEventListener('mousedown', getMousedownClient);
    drag.removeEventListener('mouseup', getMouseupClient);
    drag.removeEventListener('click', judgeClick);
  })

</script>

<template>

  <Teleport to="body">
    <transition
      leave-active-class="animate__animated animate__fadeOut" 
      enter-active-class="animate__animated animate__fadeIn"
    >
      <div class="tab-border" id="border" v-show="!tabShow" @click="tabShow = !tabShow"></div>
    </transition>
    <transition
      leave-active-class="animate__animated animate__backOutLeft" 
      enter-active-class="animate__animated animate__backInLeft"
    >
      <div class="tab" id="drag" v-show="tabShow">
        <div class="flex items-center justify-center icon">
          <transition mode="out-in"
            leave-active-class="animate__animated animate__flipOutY animate__faster" 
            enter-active-class="animate__animated animate__flipInY animate__faster"
          >
            <el-icon v-if="tab" :size="20" color="#409EFF"><EditPen /></el-icon>
            <el-icon v-else :size="20" color="#67C23A"><Edit /></el-icon>
          </transition>
        </div>
        
        <div class="fn">
          <transition mode="out-in"
            leave-active-class="animate__animated animate__flipOutY animate__faster" 
            enter-active-class="animate__animated animate__flipInY animate__faster"
          >
            <div v-if="!tab" style="margin-left: 35px; color:#409EFF" >title</div>
            <div v-else style="margin-left: 27px; color:#67C23A">content</div>
          </transition>
        </div>
      </div>
    </transition>
  </Teleport>
  
  <div class="cards">
    <div class="u-item z-negative">
      <slot name="title"></slot>
    </div>
    <div class="u-item z-positive">
      <slot name="content"></slot>
    </div>
    
  </div>  

</template>

<style scoped lang='less'>
  .tab-border{
    height: 45px;
    width: 5px;
    position: fixed;
    left: 0;
    top: 15px;
    z-index: 10;
    background-color: #fff;
    border-radius: 5px;
    cursor: pointer;
  }
  .tab{
    color: #000; 
    position: fixed; 
    top: 20%;
    left: 30px;
    height:45px; 
    width: 45px;
    border-radius: 50%; 
    z-index: 10;
    opacity: 0.90;
    cursor: pointer;
    color: #fff;
    .icon{
      width: 100%; 
      height: 100%;
      border-radius: 50%; 
      background: #fff;  
      box-shadow: 0 0px 20px rgb(150, 150, 150);
      font-size: 17px;
    }
    .fn{
      height: 40px;
      position: absolute;
      width: 80px;
      left: 50%;
      top: 50%;
      background: #fff;  
      box-shadow: 0 0px 20px rgb(150, 150, 150);
      transform: translateY(-50%);
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
      z-index: -1;
      font-size: 12px;
      display: flex;
      align-items: center;
    }
  }

  .cards {
    width: 100%;
    height: 100%;
    transition: transform 1s;
    transform-style: preserve-3d;
    font-size: 32px;
    color: #fff;

    &.z-active {
      transform: rotateY(180deg);
    }
  }
  
  .u-item {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    backface-visibility: hidden;
  }
  .z-positive {
    z-index: 1;
  }
  .z-negative {
    transform: rotateY(180deg);
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
</style>